<template>
    <view class="gallery-list-container">
        <uni-list>
            <!-- 展厅列表项 -->
            <uni-list-item direction="row" v-for="item in listData" :key="item.galleryId" :title="item.galleryName"
                :note="item.host" clickable @click="handleItemClick(item)">
                <!-- 通过header插槽定义列表左侧的图片显示 -->
                <template v-slot:header>
                    <view class="uni-thumb">
                        <image :src="item.poster" mode="aspectFill"></image>
                    </view>
                </template>

                <!-- 通过body插槽定义内容布局 -->
                <template v-slot:body>
                    <view class="gallery-item-content">
                        <view class="uni-title">
                            <text class="uni-ellipsis-2">{{ item.galleryName }}</text>
                        </view>
                        <view class="uni-note exhibition-meta">
                            <text class="author-name">{{ item.host }}</text>
                        </view>
                        <!-- <view class="uni-note publish-date-row">
                            <text class="publish-date">{{ item.last_modify_date }}</text>
                        </view> -->
                        <view class="uni-note">
                            <up-text :lines="2" size="12" wordWrap="break-word" :text="item.description"></up-text>
                        </view>

                        <!-- 点赞、阅读、评论等数量统计 -->
                        <view class="stats-container">
                            <view class="stat-item">
                                <up-icon name="heart" color="#ff6b6b" size="14"></up-icon>
                                <text class="stat-text">{{ item.likeCount || 0 }}</text>
                            </view>
                            <view class="stat-item">
                                <up-icon name="eye" color="#4ecdc4" size="14"></up-icon>
                                <text class="stat-text">{{ item.viewCount || 0 }}</text>
                            </view>
                            <view class="stat-item">
                                <up-icon name="chat" color="#45b7d1" size="14"></up-icon>
                                <text class="stat-text">{{ item.commentCount || 0 }}</text>
                            </view>
                        </view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>

        <!-- 空数据状态 -->
        <view v-if="!isLoading && (!listData || listData.length === 0)" class="empty-state">
            <up-icon name="file-text" size="48" color="#ccc"></up-icon>
            <text class="empty-text">暂无数据</text>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

// 定义 props
const props = defineProps({
    // 列表数据
    listData: {
        type: Array,
        default: () => []
    },
    // 是否显示空状态
    showEmpty: {
        type: Boolean,
        default: true
    },
    isLoading: {
        type: Boolean,
        default: false
    },
})

// 定义 emits
const emit = defineEmits(['item-click'])

// 处理列表项点击事件
const handleItemClick = (item) => {
    emit('item-click', item)
}
</script>

<style lang="scss" scoped>
.gallery-list-container {
    width: 100%;

    .uni-thumb {
        flex-shrink: 0;
        margin-right: $uni-spacing-row-base;
        width: 240rpx;
        height: 300rpx;
        border-radius: $uni-border-radius-lg;
        overflow: hidden;
        border: 1px #f5f5f5 solid;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .gallery-item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300rpx; /* 与图片高度保持一致 */
    }

    .uni-title {
        display: flex;
        margin-bottom: $uni-spacing-col-base;
        font-size: $uni-font-size-lg;
        font-weight: bold;
        color: #3b4144;
    }

    .exhibition-meta {
        margin-top: 8rpx;
        margin-bottom: 8rpx;

        .author-name {
            color: #666;
            font-size: 24rpx;
            font-weight: 500;
        }
    }

    .publish-date-row {
        margin-bottom: 16rpx;

        .publish-date {
            color: #999;
            font-size: 22rpx;
        }
    }

    .uni-note {
        color: #999;
        font-size: $uni-font-size-sm;
        margin: 6rpx;
        // padding: 2rpx;
    }

    .stats-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 24rpx;
        margin-top: auto; /* 使用 auto margin 将其推到底部 */
        padding-top: 16rpx;
        border-top: 1rpx solid #f5f5f5;

        .stat-item {
            display: flex;
            align-items: center;
            gap: 6rpx;

            .stat-text {
                font-size: 22rpx;
                color: #666;
                font-weight: 500;
            }
        }
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100rpx 0;

        .empty-text {
            font-size: 28rpx;
            color: #999;
            margin-top: 20rpx;
        }
    }
}
</style>